<template>
  <my-table
    ref="childRef"
    :url="url"
    v-model:queryForm="sizeForm"
    pagination
    showindex
    border
    selection
    highlight-current-row
    height="500px"
    @selection-change="handleSelectionChange"
  >
    <template #queryForm>
      <el-form-item prop="realName1">
        <el-input v-model="sizeForm.realName1" placeholder="姓名" />
      </el-form-item>
      <el-form-item prop="realName3">
        <el-cascader
          v-model="sizeForm.realName3"
          :options="options"
          @change="
            v => {
              sizeForm.realName3 = v[v.length - 1]
            }
          "
        ></el-cascader>
      </el-form-item>
      <el-form-item prop="realName4">
        <el-select v-model="sizeForm.realName4" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </template>
    <template #moreBtn>
      <el-button type="primary" plain :icon="Plus" @click="actionHandle('add')">新增</el-button>
    </template>
    <template #image_uri="{ row }">
      <img style="height: 60px; width: 60px" :src="row.image_uri" @click="clickimg(row)" />
    </template>
    <template #moreAction="{ row }">
      <el-button link type="primary" @click="actionHandle('look', row)">查看</el-button>
      <el-button link type="warning" @click="actionHandle('edit', row)">编辑</el-button>
    </template>
  </my-table>

  <my-dialog
    v-model:visible="dialogVisible"
    :url="url"
    :diaForm="form"
    :title="dialogtitle"
    :islook="isLook"
    :rules="rules"
  >
    <template #form="{ form }">
      <el-form-item prop="author" label="姓名">
        <el-input v-model="form.author" placeholder="姓名" />
      </el-form-item>
      <el-form-item prop="timestamp" label="区域">
        <el-select v-model="form.timestamp" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
    </template>
  </my-dialog>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import MyTable from './myTable'
import MyDialog from './myDialog'
export default {
  setup() {
    return {
      Plus,
    }
  },
  components: { MyTable, MyDialog },
  data() {
    return {
      rules: {
        author: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
        timestamp: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
      },
      url: Object.freeze({
        listUrl: '/api/article/list',
        delUrl: '/api/article/del',
        editUrl: '/api/article/edit',
        addUrl: '/api/article/add',
        UrlbyId: '/api/article/Id',
        exporturl: 'excelexport', //不传该字段则不显示导出按钮;传递excelexport标识为前端导出;，
        // exporturl:{typeUrl:'excelexport',fileName:'数据表1',wsName:'工作表1'} //不传该字段则不显示导出按钮;传递excelexport标识为前端导出;，
      }),
      sizeForm: {},
      form: {
        author: '',
        timestamp: '',
      },
      dialogVisible: false,
      dialogtitle: '',
      isLook: false,
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [
            {
              value: 'disciplines',
              label: 'Disciplines',
              children: [
                {
                  value: 'efficiency',
                  label: 'Efficiency',
                },
                {
                  value: 'controllability',
                  label: 'Controllability',
                },
              ],
            },
          ],
        },
      ],
    }
  },
  methods: {
    actionHandle(type, row) {
      this.dialogVisible = true
      switch (type) {
        case 'add':
          this.dialogtitle = '新增'
          this.isLook = false
          break
        case 'edit':
          this.dialogtitle = '编辑'
          this.isLook = false
          this.form = { ...row }
          break
        case 'look':
          this.dialogtitle = '查看'
          this.isLook = true
          this.form = { ...row }
          break
        default:
          console.log('【type】类型错误')
      }
    },

    getList() {
      this.$refs.childRef.getInitDate()
    },
    clickimg(row) {
      console.log(row)
      ElMessage.success(`点击了图片id为${row.id}`)
      this.$refs.childRef.getInitDate()
    },
  },
}
</script>
<style lang="css" scoped>
</style>